{% extends "layout.html" %}

{% block content %}
<section id="basic-math" class="section basic-math">
    <h2>Basic Arithmetic Operations</h2>
    <form id="math-form">
        <input type="text" name="num1" placeholder="Number 1" required>
        <input type="text" name="num2" placeholder="Number 2" required>
        <select name="operation" required>
            <option value="addition">Addition</option>
            <option value="subtraction">Subtraction</option>
            <option value="multiplication">Multiplication</option>
            <option value="division">Division</option>
        </select>
        <button type="submit">Calculate</button>
    </form>
    <div class="result" id="math-result"></div>
</section>

<section id="temperature-conversion" class="section temperature-conversion">
    <h2>Temperature Conversion</h2>
    <form id="temperature-form">
        <input type="text" name="temperature" placeholder="Temperature" required>
        <select name="fromUnit" required>
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
        </select>
        <select name="toUnit" required>
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
        </select>
        <button type="submit">Convert</button>
    </form>
    <div class="result" id="temperature-result"></div>
</section>



<section id="length-conversion" class="section length-conversion">
    <h2>Length Conversion</h2>
    <form id="length-form">
        <input type="text" name="length" placeholder="Length" required>
        <select name="fromUnit" required>
            <option value="m">Meter</option>
            <option value="cm">Centimeter</option>
            <option value="km">Kilometer</option>
            <option value="in">Inch</option>
            <option value="ft">Foot</option>
            <option value="yd">Yard</option>
            <option value="mi">Mile</option>
        </select>
        <select name="toUnit" required>
            <option value="m">Meter</option>
            <option value="cm">Centimeter</option>
            <option value="km">Kilometer</option>
            <option value="in">Inch</option>
            <option value="ft">Foot</option>
            <option value="yd">Yard</option>
            <option value="mi">Mile</option>
        </select>
        <button type="submit">Convert</button>
    </form>
    <div class="result" id="length-result"></div>
</section>

<section id="weight-conversion" class="section weight-conversion">
    <h2>Weight Conversion</h2>
    <form id="weight-form">
        <input type="text" name="weight" placeholder="Weight" required>
        <select name="fromUnit" required>
            <option value="kg">Kilogram</option>
            <option value="g">Gram</option>
            <option value="mg">Milligram</option>
            <option value="oz">Ounce</option>
            <option value="lb">Pound</option>
            <option value="st">Stone</option>
            <option value="t">Ton</option>
        </select>
        <select name="toUnit" required>
            <option value="kg">Kilogram</option>
            <option value="g">Gram</option>
            <option value="mg">Milligram</option>
            <option value="oz">Ounce</option>
            <option value="lb">Pound</option>
            <option value="st">Stone</option>
            <option value="t">Ton</option>
        </select>
        <button type="submit">Convert</button>
    </form>
    <div class="result" id="weight-result"></div>
</section>

<section id="data-conversion" class="section data-conversion">
    <h2>Data Conversion</h2>
    <form id="data-form">
        <input type="text" name="dataSize" placeholder="Data Size" required>
        <select name="fromUnit" required>
            <option value="KB">KB</option>
            <option value="MB">MB</option>
            <option value="GB">GB</option>
            <option value="TB">TB</option>
        </select>
        <select name="toUnit" required>
            <option value="KB">KB</option>
            <option value="MB">MB</option>
            <option value="GB">GB</option>
            <option value="TB">TB</option>
        </select>
        <button type="submit">Convert</button>
    </form>
    <div class="result" id="data-result"></div>
</section>
{% endblock %}